<template>
  <div class="visual-header">
    <div class="header-wrapper">
      <div class="left-bottom"></div>
      <div class="right-bottom"></div>
      <div class="header-containter">
        <div class="left-top"></div>
        <div class="repeat-line"></div>
        <div class="header-content" :style="mainImageUrl">
          <div class="header-title-wrapper">
            <div class="header-title">
              {{ $t('headerTitle') }}
            </div>
          </div>
        </div>
        <div class="repeat-line"></div>
        <div class="right-top"></div>
      </div>
      <weather-box v-if="showWeather" :weatherData="weatherData"></weather-box>
      <address-box v-if="showAddress" :addressData="addressData"></address-box>
      <realtime-box v-if="showDate"></realtime-box>
      <language-box v-if="languageDate"></language-box>
    </div>
  </div>
</template>

<script>
  import WeatherBox from './vue/WeatherBox.vue'
  import AddressBox from './vue/AddressBox.vue'
  import LanguageBox from './vue/LanguageBox.vue'
  import RealtimeBox from './vue/RealtimeBox.vue'

  export default {
    name: 'visualHeader1',
    components: {
      WeatherBox,
      AddressBox,
      LanguageBox,
      RealtimeBox,
    },
    props: {
      /**
       * 数据内容
       */
      data: Object,
      /**
       * 标题
       */
      title: {
        type: String,
        default: 'Trendy 共享汽车营业数据',
      },
      /**
       * 自定义主图
       */
      customMainImage: {
        type: Boolean,
        default: false,
      },
      /**
       * 中间的主图片
       */
      mainImage: {
        type: String,
        default: '',
      },
      /**
       * 主图片宽度
       */
      mainImageWidth: {
        type: String,
        default: '850px',
      },
      /**
       * 是否显示天气
       */
      showWeather: {
        type: Boolean,
        default: true,
      },
      /**
       * 语言切换
       */
      languageDate: {
        type: Boolean,
        default: true,
      },
      /**
       * 是否显示日期
       */
      showDate: {
        type: Boolean,
        default: true,
      },
      /**
       * 天气信息
       */
      weather: {
        type: Object,
        default: () => ({
          icon: '',
          conditions: '',
          minTemperatura: 5,
          maxTemperatura: 15,
        }),
      },
      /**
       * 是否显示地址
       */
      showAddress: {
        type: Boolean,
        default: true,
      },
      addressData: {
        type: Object,
        default: () => ({}),
      }
    },
    data() {
      return {}
    },
    computed: {
      /**
       * 天气数据
       */
      weatherData() {
        if (this.data && this.data.weather) {
          return this.data.weather
        }
        return this.weather
      },
      /**
       * 主图片样式
       */
      mainImageUrl() {
        if (this.customMainImage && this.mainImage) {
          return {
            backgroundImage: `url(${evs.resourceUrl(this.mainImage)})`,
            width: this.mainImageWidth,
          }
        }
        return {}
      },
    },
    methods: {},
  }
</script>
<style scoped lang="scss" >
  .visual-header {
    width: 100%;
    position: relative;
    z-index: 1;

    & > .header-wrapper {
      position: relative;
      width: 100%;
      min-width: 1440px;
      height: 114px;
      background: linear-gradient(180deg, #032750 15%, rgba(3, 41, 86, 0.7) 90%, rgba(2, 37, 76, 0) 100%);      

      & > .left-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 250px;
        height: 100%;
        pointer-events: none;
        user-select: none;
      }

      & > .right-bottom {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 250px;
        height: 100%;
        pointer-events: none;
        user-select: none;
      }

      & > .header-containter {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        height: 100%;
        pointer-events: none;
        user-select: none;
        background-image: url('./assets/herderBack.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;

        & > .left-top {
          flex: 20;
          max-width: 535px;
          height: 44px;
          overflow: hidden;
        }

        & > .repeat-line {
          flex: 1;
          min-width: 1px;
          height: 44px;
        }

        & > .right-top {
          flex: 20;
          max-width: 535px;
          height: 44px;
        }

        & > .header-content {
          position: relative;
          width: 850px;
          height: 100%;

          & > .header-title-wrapper {
            position: absolute;
            top: 0;
            left: 50%;
            width: 638px;
            height: 100px;
            overflow: hidden;
            transform: translateX(-50%);

            & > .header-title {
              position: absolute;
              top: 50%;
              left: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-family: 'AlibabaPuHuiTi_2_115_Black';
              font-size: 36px;
              color: #fff;
              text-align: center;
              text-shadow: 0 2px 0 #053f8c, 0 1px 4px rgb(0 0 0 / 50%);
              letter-spacing: 0px;
              white-space: nowrap;
              user-select: none;
              transform: translate(-50%, -50%);

              img {
                width: 54px;
                height: 54px;
                margin-right: 12px;
              }
            }
          }

          & > .header-title-action {
            position: absolute;
            top: 0;
            left: 50%;
            width: 638px;
            height: 85px;
            pointer-events: all;
            transform: translateX(-50%);

            &:hover {
              height: 141px;

              & > .nav-box {
                display: block;
              }
            }

            & > .nav-box {
              top: 114px;
              left: 50%;
              display: none;
              transform: translateX(-50%);
            }
          }
        }
      }
      & > .language-box {
        top: 44px;
        right: 270px;
        width: 150px;
      }
      & > .address-box {
        top: 44px;
        left: 300px;
      }

      & > .weather-box {
        top: 44px;
        left: 60px;
      }

      & > .duty-leader-box {
        top: 44px;
        left: 310px;
      }

      & > .dashboard-box {
        top: 44px;
        right: 270px;
      }

      & > .realtime-box {
        top: 44px;
        right: 60px;
      }
    }
  }
</style>
